<template>
  <div class="banner" :style="{
    backgroundColor: config.pageConfig.color,
  }">
    <div :style="{
      marginTop: config.pageConfig.marginTop + 'px',
      marginBottom: config.pageConfig.marginBottom + 'px',
      marginLeft: config.pageConfig.margin + 'px',
      marginRight: config.pageConfig.margin + 'px',
    }">
      <div class="img"
      >
          <div class="search-input" :style="{
               backgroundColor: `rgba(255,255,255,${config.pageConfig.opacity/100})`,
               width:`calc(100% - 24px - ${2*config.pageConfig.borderWidth}px)`,
               left:`calc(12px + ${config.pageConfig.borderWidth}px )`
              }"
              :class="getName(config.pageConfig.custom)"
              >
              <el-icon :style="{
                 color: config.pageConfig.iconcolor
                }"><Search /></el-icon>
              <input v-model="config.pageConfig.searchWord"  placeholder="请输入" :style="{
               color: config.pageConfig.textcolor
              }" />
          </div>
        <el-carousel class="banner-container style-1">
          <el-carousel-item v-for="(item, index) in config.pageConfig.imgList" :key="index" class="img-container"
             @click="tolink(item.url)">
            <img v-if="config.pageConfig.imgList[index].imgUrl"
              :class="config.pageConfig.style == 2 ? 'shadow-style' : ''" :src="config.pageConfig.imgList[index].imgUrl"
              class="banner-img" :style="config.pageConfig.style == 3?{
                width: `calc(100% - ${2 * config.pageConfig.margin}px`,
                borderWidth: config.pageConfig.borderWidth + 'px',
                  borderStyle: 'solid',
                  borderColor: config.pageConfig.borderColor,
                borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
              }:{
                  borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                  borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                  borderBottomLeftRadius:
                    config.pageConfig.radiusBottom + 'px',
                  borderBottomRightRadius:
                    config.pageConfig.radiusBottom + 'px',
                }" alt="" />
            <img v-else :class="config.pageConfig.style == 2 ? 'shadow-style' : ''" :style="config.pageConfig.style == 3?{
                width: `calc(100% - ${2 * config.pageConfig.margin}px`,
                borderWidth: config.pageConfig.borderWidth + 'px',
                  borderStyle: 'solid',
                  borderColor: config.pageConfig.borderColor,
                borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
              }:{
                  borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                  borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                  borderBottomLeftRadius:
                    config.pageConfig.radiusBottom + 'px',
                  borderBottomRightRadius:
                    config.pageConfig.radiusBottom + 'px',
                }" src="../../../../../../assets/app/bar/default_banner.png" class="banner-img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "BannerSearch",
};
</script>
<script lang="ts" setup>
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      custom: "1",
      iconcolor:"#fd463e",
      textcolor:'#5e6066',
      color: "",
      opacity:80,
      position:'2',
      style:'1',
      borderColor: "#ededed",
      borderWidth: 1,
      marginTop: 0,
      marginBottom: 0,
      marginImg: 5,
      margin: 0,
      radiusTop: 0,
      radiusBottom: 0,
      imgList: [
        {
          imgUrl: "",
          name: "",
          url: "",
        },
        {
          imgUrl: "",
          name: "",
          url: "",
        },
      ],
    },
  },
  show: {
    type: Boolean,
    default: true,
  },
});
console.log(config.pageConfig);
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
const getFlex = (style: string) => {
  if (style == "1") {
    return "text-align:left;";
  } else if (style == "2") {
    return "text-align:center;";
  } else if (style == "3") {
    return "text-align:right;";
  }
};
const getName = (style: string) => {
  if (style == "1") {
      return "arc";
  } else if (style == "2") {
      return "round";
  } else if (style == "3") {
      return "square";
  }
};
const tolink = (url: string) => {
  if (url && config.show == false) {
    window.location.href = url;
  }
};
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.search-input{
  position:absolute;
  top:12px;
  z-index:2;
  height: 38px;
  line-height: 38px;
  padding: 0 12px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  display: flex;
  align-items: center;
  font-size: 14px;
  &.arc{
    border-radius: 4px;
  }
  &.round{
    border-radius: 17px;
  }
  &.square{
    border-radius: 0px;
  }
  input{
     margin-left:10px;
     height: 38px;
     line-height: 38px;
     padding:0;
     background:transparent;
  }
  :deep(.el-icon){
      font-size:20px;
    }

}
.img {
  width: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  overflow: hidden;
  position: relative;

  .banner-img {
    width: 100%;
    display: block;
  }

  .dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    height: 14px;
    padding: 0 10px;
    box-sizing: border-box;
      .dot {
        display: inline-block;
        height: 6px;
        width: 14px;
        border-radius: 10px;
        background: #ccc;
        margin: 0 4px;

        &.active {
          height: 6px;
          width: 14px;
          border-radius: 6px;
          background: #fff;
        }
      }
    }
  }

.shadow-style {
  border: none;
  box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}

.banner-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.img-container {
  overflow: hidden;
}

.img-container {
  border: 1px solid transparent;
}
</style>
